<template>
  <div class="rightInfo custom-select-container">
    <div class="airport-select-container">
      <div class="select-item" v-for="i in 5" :key="i">
        <label>选择机场{{ i }}</label>
        <el-select
          v-model="airports[i - 1]"
          :placeholder="`请选择机场${i}`"
          clearable
        >
          <el-option
            v-for="item in airportList"
            :key="item.id"
            :label="`(${item.airportCode})${item.city}/${item.name}`"
            :value="item.airportCode"
          />
        </el-select>
      </div>

      <div class="select-item">
        <label>预测星座</label>
        <el-select
          v-model="optionsListSatsysDefault"
          placeholder="请选择"
          clearable
        >
          <el-option
            v-for="item in optionsListSatsys"
            :key="item.id"
            :label="item.desc"
            :value="item.id"
          />
        </el-select>
      </div>
      <div class="select-item">
        <label>预测仰角（度）</label>
        <el-select
          v-model="optionsListAngleDefault"
          placeholder="请选择"
          clearable
        >
          <el-option
            v-for="item in optionsListAngle"
            :key="item.id"
            :label="item.desc"
            :value="item.id"
          />
        </el-select>
      </div>
      <div class="select-item">
        <label>算法</label>
        <el-select
          v-model="optionsListAlgorithmDefault"
          placeholder="请选择"
          clearable
        >
          <el-option
            v-for="item in optionsListAlgorithm"
            :key="item.id"
            :label="item.desc"
            :value="item.id"
          />
        </el-select>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, defineProps, defineEmits, computed, watch } from "vue";

const props = defineProps({
  airportList: {
    type: Array,
    default: () => [],
  },
  optionsListSatsys: {
    type: Array,
    default: () => [],
  },
  optionsListAngle: {
    type: Array,
    default: () => [],
  },
  optionsListAlgorithm: {
    type: Array,
    default: () => [],
  },
  defaultFormData: {
    type: Object,
    required: true,
    default: () => ({
      airports: ["", "", "", "", ""],
      optionsListSatsysDefault: "",
      optionsListAngleDefault: "",
      optionsListAlgorithmDefault: "",
    }),
    validator: (value) => {
      const isValid =
        Array.isArray(value.airports) && value.airports.length === 5;
      if (!isValid) {
        console.warn("defaultFormData.airports 必须是长度为5的数组");
      }
      return isValid;
    },
  },
});
// console.log("子组件接收的完整defaultFormData:", props.defaultFormData);

const safeAirports = (() => {
  // 新增：判断字段是否存在，不存在则兜底
  if (
    !props.defaultFormData ||
    !Array.isArray(props.defaultFormData.airports)
  ) {
    console.warn("父组件未传递有效airports，使用默认数组");
    return ["", "", "", "", ""];
  }
  // 确保长度为5
  return props.defaultFormData.airports
    .slice(0, 5)
    .concat(Array(5 - props.defaultFormData.airports.length).fill(""));
})();

const airports = ref([...safeAirports]);
const optionsListSatsysDefault = ref(
  props.defaultFormData.optionsListSatsysDefault?.toString() || ""
);
const optionsListAngleDefault = ref(
  props.defaultFormData.optionsListAngleDefault?.toString() || ""
);
const optionsListAlgorithmDefault = ref(
  props.defaultFormData.optionsListAlgorithmDefault?.toString() || ""
);

const formData = computed(() => ({
  airports: [...airports.value],
  optionsListSatsysDefault: optionsListSatsysDefault.value,
  optionsListAngleDefault: optionsListAngleDefault.value,
  optionsListAlgorithmDefault: optionsListAlgorithmDefault.value,
}));

const emit = defineEmits(["update:formData", "submit"]);

watch(
  formData,
  (newData) => {
    console.log(newData, "newData");
    emit("update:formData", newData);
  },
  { deep: true, immediate: true }
);
watch(
  () => props.defaultFormData,
  (newVal) => {
    console.log(1);
    let newAirports = ["", "", "", "", ""];
    if (Array.isArray(newVal.airports)) {
      newAirports = newVal.airports
        .slice(0, 5)
        .concat(Array(5 - newVal.airports.length).fill(""));
    }
    airports.value = [...newAirports];
    optionsListSatsysDefault.value = newVal.optionsListSatsysDefault;
    optionsListAngleDefault.value = newVal.optionsListAngleDefault;
    optionsListAlgorithmDefault.value = newVal.optionsListAlgorithmDefault;
  },
  { deep: true }
);
</script>
<style scoped lang="scss">
.airport-select-container {
  padding: 0 1px;
  height: auto;
  height: calc(100vh - 212px);
  overflow-y: auto;
  box-sizing: border-box;
}
.select-item {
  margin-bottom: 12px;
}
.select-item label {
  text-align: left;
  display: block;
  font-size: 14px;
  margin-bottom: 4px;
  color: #fff !important;
}

.airport-select-container::-webkit-scrollbar {
  width: 4px;
}
.airport-select-container::-webkit-scrollbar-track {
  background: rgba(6, 15, 37, 0.5);
  border-radius: 2px;
}
.airport-select-container::-webkit-scrollbar-thumb {
  background: rgba(0, 175, 255, 0.4);
  border-radius: 2px;
}
.airport-select-container::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 175, 255, 0.6);
}

.el-select-dropdown__item {
  font-size: 12px;
  height: 28px !important;
  line-height: 28px !important;
  background-color: #060f25;
  color: #fff;
}

.el-select-dropdown__item:hover {
  background-color: #0c1e4b;
  color: #fff;
}

.el-select-dropdown__item.is-selected {
  background-color: #0c1e4b;
  color: #0083cf !important;
}
.el-select-dropdown__item.is-hovering {
  background-color: #0c1e4b;
  color: #fff;
}
</style>
